<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>族谱网 - 首页</title>


    <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="assets/jquery/jquery2.2.4.min.js"></script>
    <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

    <link href="assets/fs002/fs_0.2.css" rel="stylesheet">
    <link href="assets/fitness/all_fit.css" rel="stylesheet">
    <link href="assets/fitness/index_fit.css" rel="stylesheet">

    <style type="text/css">.dropbtn {


 background: rgb(248,119,9);
 margin-left: 10px;
    color: white;
     padding: 10px 20px;
    font-size: 16px;
    border: none;
    cursor: pointer;
     border-top: 1px solid rgb(222,208,33);
    border-left: 1px solid rgb(222,208,33);
    border-right: 1px solid rgb(222,208,33);
    border-radius: 4px 4px 0 0;
     margin-top: 10px;
/*margin-left: 10px;
    color: #fff;
    background: rgb(248,119,9);
    padding: 10px 20px;
    margin-top: 10px;
    border-top: 1px solid rgb(222,208,33);
    border-left: 1px solid rgb(222,208,33);
    border-right: 1px solid rgb(222,208,33);
    border-radius: 4px 4px 0 0;*/
}

.dropbtn:hover, .dropbtn:focus {
    background-color: rgb(268,139,9);
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: #f1f1f1}

.show {display:block;}</style>
    <script type="text/javascript">
/* 点击按钮，下拉菜单在 显示/隐藏 之间切换 */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// 点击下拉菜单意外区域隐藏
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
    </script>


<script>
      //图片上传预览    IE是用了滤镜。
        function previewImage(file)
        {
          var MAXWIDTH  = 90; 
          var MAXHEIGHT = 90;
          var div = document.getElementById('preview');
          if (file.files && file.files[0])
          {
              div.innerHTML ='<img id=imghead onclick=$("#previewImg").click()>';
              var img = document.getElementById('imghead');
              img.onload = function(){
                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                img.width  =  rect.width;
                img.height =  rect.height;
//                 img.style.marginLeft = rect.left+'px';
                img.style.marginTop = rect.top+'px';
              }
              var reader = new FileReader();
              reader.onload = function(evt){img.src = evt.target.result;}
              reader.readAsDataURL(file.files[0]);
          }
          else //兼容IE
          {
            var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
            file.select();
            var src = document.selection.createRange().text;
            div.innerHTML = '<img id=imghead>';
            var img = document.getElementById('imghead');
            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
            status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
            div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
          }
        }
        function clacImgZoomParam( maxWidth, maxHeight, width, height ){
            var param = {top:0, left:0, width:width, height:height};
            if( width>maxWidth || height>maxHeight ){
                rateWidth = width / maxWidth;
                rateHeight = height / maxHeight;
                
                if( rateWidth > rateHeight ){
                    param.width =  maxWidth;
                    param.height = Math.round(height / rateWidth);
                }else{
                    param.width = Math.round(width / rateHeight);
                    param.height = maxHeight;
                }
            }
            param.left = Math.round((maxWidth - param.width) / 2);
            param.top = Math.round((maxHeight - param.height) / 2);
            return param;
        }
    </script>

</head>
<body>
<div class="container-fluid zp-topper">
    <div class="row">
        <div class="container">
            <img src="assets/img/logo.png">
            <span style="color:darkgoldenrod;">登录  &nbsp; 查询族谱</span>
        </div>
    </div>
</div>


<div class="navbar navbar-default">
    <div class="container">
        <a class="navbar-brand" href="#"></a>
        <div class="collapse navbar-collapse" id="topbar">
            <ul class="nav navbar-nav">
                <li class=""><a href="homepage.html">首页</a></li>
                <li class=""><a href="list.html">百家姓</a></li>
             <li class=""><a href="lyan.html">留言板</a></li>
           <!--         <li class=""><a>搜索查询</a></li> -->
            </ul>

            <ul class="nav navbar-nav navbar-right">
               <div class="dropdown">
<button onclick="myFunction()" class="dropbtn">admin</button>

  <div id="myDropdown" class="dropdown-content">
    <a href="#home">个人信息</a>
    <a href="#about">切换账号</a>
    <a href="#contact">退出</a>
  </div>
</div> 
            </ul>
        </div>
    </div>
</div>


<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-warning" style="padding-bottom: 30px;min-height: 720px;">
                <div class="panel-heading">我的账户信息</div>
                <div class="panel-body" style="padding-left: 0px;">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="panel" style="padding-bottom: 30px;min-height: 720px;">
                                <div class="panel-body" style="line-height: 30px;padding-left: 40px;">
                                    <br><br>

                                 <div id="addCommodityIndex">
<div class="input-group row">

<div class="col-sm-9 big-photo">
<div id="preview">
<img id="imghead" border="0" src="assets/img/photo_icon.png" width="90" height="90" onclick="$('#previewImg').click();">
</div>
<input type="file" onchange="previewImage(this)" style="display: none;" id="previewImg">
</div>
</div>

</div>



                                    <br><br>
                                    <strong>账户名称 </strong>admin<br>
                                    <strong>账户等级 </strong> <span class="badge" style="background: orange;">Vip 1</span><br>
                                    <a href="#">修改个人信息</a><br>
                                    <a href="modify.html">修改密码</a><br>
                                   <!--  <a href="#">申请添加新族谱</a><br> -->
                                </div>
                            </div>
                        </div>
                        <div class="col-md-9">
                            <div class="panel" style="padding-bottom: 30px;min-height: 720px;">
                                <div class="panel-body" style="line-height: 30px;">

                                        <p>族谱列表</p>

                                        <div class="list-group">
                                            <a href="detail.html" class="list-group-item"><img src="assets/img/icon.png" style="width: 16px;"> 岐山王氏</a>
                                            <a href="detail.html" class="list-group-item"><img src="assets/img/icon.png" style="width: 16px;"> 辽宁王氏</a>
                                            <a href="detail.html" class="list-group-item"><img src="assets/img/icon.png" style="width: 16px;"> 王氏族谱</a>
                                            <a href="detail.html" class="list-group-item"><img src="assets/img/icon.png" style="width: 16px;"> 王元亨族谱</a>
                                        </div>

                                </div>
                            </div>


                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<div class="container-fluid" style="background: #fff;padding-top: 10px;">
    <div class="container">
        <div id="footer" style="margin-bottom:20px;">
            <ul id="copyright" style="margin-left:0px;line-height:130%;">

            <div style="width:300px;margin:0 auto; padding:20px 0;">
                <a target="_blank" # style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">粤公网安备 43018102000107号</p></a>
            </div>
        </div>
    </div>
</div>

</body>
</html>